package showcase

import (
	"github.com/templui/templui/internal/components/datepicker"
	"github.com/templui/templui/internal/components/label"
	"time"
)

templ DatePickerFormats() {
	<div class="w-full max-w-sm flex flex-col gap-4">
		<div class="space-y-2">
			@label.Label(label.Props{
				For: "dp-default",
			}) {
				Default (Medium, en-US)
			}
			@datepicker.DatePicker(datepicker.Props{
				ID:    "dp-default",
				Value: time.Now(),
			})
		</div>
		<div class="space-y-2">
			@label.Label(label.Props{
				For: "dp-de-short",
			}) {
				Short Format (German)
			}
			@datepicker.DatePicker(datepicker.Props{
				ID:        "dp-de-short",
				LocaleTag: datepicker.LocaleTagGerman,
				Format:    datepicker.FormatLOCALE_SHORT,
				Value:     time.Now(),
			})
		</div>
		<div class="space-y-2">
			@label.Label(label.Props{
				For: "dp-es-long",
			}) {
				Long Format (Spanish)
			}
			@datepicker.DatePicker(datepicker.Props{
				ID:          "dp-es-long",
				LocaleTag:   datepicker.LocaleTagSpanish,
				Format:      datepicker.FormatLOCALE_LONG,
				Value:       time.Now().AddDate(0, 0, -30), // 30 days ago
				Placeholder: "Seleccionar fecha",
			})
		</div>
		<div class="space-y-2">
			@label.Label(label.Props{
				For: "dp-fr-full",
			}) {
				Full Format (French)
			}
			@datepicker.DatePicker(datepicker.Props{
				ID:        "dp-fr-full",
				LocaleTag: datepicker.LocaleTagFrench,
				Format:    datepicker.FormatLOCALE_FULL,
				Value:     time.Now(),
			})
		</div>
		<div class="space-y-2">
			@label.Label(label.Props{
				For: "dp-ja-medium",
			}) {
				Medium Format (Japanese)
			}
			@datepicker.DatePicker(datepicker.Props{
				ID:        "dp-ja-medium",
				LocaleTag: datepicker.LocaleTagJapanese,
				Format:    datepicker.FormatLOCALE_MEDIUM,
				Value:     time.Now(),
			})
		</div>
		<div class="space-y-2">
			@label.Label(label.Props{
				For: "dp-ar-short",
			}) {
				Short Format (Arabic - ar-SA)
			}
			@datepicker.DatePicker(datepicker.Props{
				ID:        "dp-ar-short",
				LocaleTag: "ar-SA", // Using string literal for locale
				Format:    datepicker.FormatLOCALE_SHORT,
				Value:     time.Now(),
			})
		</div>
	</div>
}
